<template>
  <div class="login">
    <div class="logo"></div>
    <div class="sinin"></div>
    <div>
      <van-tabs v-model="active" @change="ischange">
        <van-tab
          v-for="(item, index) in tabsdata"
          :key="index"
          :title="item.title"
        >
          <div class="content">
            <van-form @submit="onSubmit">
              <van-field
                v-model="username"
                name="手机号"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <van-field
                v-model="sms"
                center
                clearable
                :label="isChange ? '短信验证码' : '密码'"
                :placeholder="isChange ? '请输入短信验证码' : '请输入密码'"
              >
                <template #button v-if="isChange">
                  <van-button size="small" type="primary"
                    >发送验证码</van-button
                  >
                </template>
              </van-field>
            </van-form>
            <van-button type="primary" size="mini" v-if="!isChange">忘记密码</van-button>
            <div style="margin: 35px 15px">
              <van-button round block type="info" native-type="submit" color="#FD6D29" @click="getLogin"
                >登录</van-button
              >
              
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Login",
  data() {
    return {
      active: "",
      sms:'',
      isChange: true,
      tabsdata: [
        {
          title: "免密登录",
        },
        {
          title: "密码登录",
        },
      ],
      username: "",
      password: "",
    };
  },
  methods: {
    ischange() {
      this.isChange = !this.isChange;
      console.log("ss");
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    getLogin(){
      this.axios({
        method:'get',
        url:'https://apis.netstart.cn/douguo/user/info/16753515'
      }).then((res) =>{
        if( res.status === 200){
         
        }
        console.log('res ==>',res);
      }).catch((err) =>{
        console.log('err ==>',err);
      })
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tabs__line{
  background-color: #FD6D29;
}
/deep/.van-button--mini{
  position: absolute;
  right: 20px;
  bottom: 56px;
}
/deep/.van-field {
  margin-top: 10px;
}

/deep/.van-button--small {
  color: rgba(255, 255, 255, 0.9);
  background-color: transparent;
  border:none;
  color: rgb(41, 207, 19);
  font-size: 15px;
}
.logo {
  width: 60%;
  height: 50px;
  margin: 30px auto;
  background: url("../assets/logo.png") no-repeat center center;
  background-size: cover;
}
.sinin {
  width: 100%;
  height: 300px;
  background: url("../assets/sinin.png") no-repeat center center;
}
</style>